<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>layui在线调试</title>
		<link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
		<style>
			body {
				margin: 10px;
				background: #999;
			}

			.demo-carousel {
				height: 200px;
				line-height: 200px;
				text-align: center;
			}

			.layui-card-header {
				background: #01AAED;
				color: #fff
			}
			
			.layui-card-body{
				height:calc(100vh - 50px);
				overflow-y:auto ;
			}
			
			.text-container{
				position: absolute;
				bottom: 3px;
				left: 3px;
			}
			
			.text-container span{
				color: #FFF9EC;
				font-size: 18px;
				font-weight: bold;
			}
			
		</style>
	</head>
	<body>

		<div class="layui-row layui-col-space1">
			<div class="layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-body">
						<div id="test12" class="demo-tree-more"></div>
					</div>
				</div>
				
			</div>
			<div class="layui-col-xs9">
					<div class="layui-card">
						<div class="layui-card-body">
								<img src="../../images/test1.png" style="width: 100%; height: 100%;">
								</div>
							</div>
						</div>
					</div>
					
				
		


	</body>
	<script src="../../../layui/layui.js"></script>
	<script src="../../libs/echarts/echarts.min.js"></script>
	<script src="../../libs/echarts/echartsTheme.js"></script>
	<script>
		layui.config({
			version: '1572350921010' //为了更新 js 缓存，可忽略
		});

		layui.use(['tree', 'util'], function() {
			var tree = layui.tree,
				layer = layui.layer,
				util = layui.util;
			var app = {};
			//模拟数据
			data = [{
				title: '南疆',
				id: 1,
				field: 'name1',
				checked: true,
				spread: true,
				children: [{
						title: '翠屏城小区',
						id: 3,
						field: '',
						spread: true,
						children: [{
							title: '翠屏城1号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城2号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城3号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城4号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城5号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城6号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城7号泵房',
							id: 20,
							field: ''
						}]
					}, {
						title: '世纪花园小区',
						id: 20,
						field: '',
						spread: true,
						children: [{
							title: '世纪花园1号泵房',
							id: 20,
							field: ''
						}, {
							title: '世纪花园2号泵房',
							id: 20,
							field: ''
						}, {
							title: '世纪花园3号泵房',
							id: 20,
							field: ''
						}, {
							title: '世纪花园4号泵房',
							id: 20,
							field: ''
						}, {
							title: '世纪花园5号泵房',
							id: 20,
							field: ''
						}]
					}, {
						title: '奧斯伯恩庄园',
						id: 20,
						field: '',
						spread: true,
						children: [{
							title: '奧斯伯恩1号泵房',
							id: 20,
							field: ''
						}, {
							title: '奧斯伯恩2号泵房',
							id: 20,
							field: ''
						}, {
							title: '奧斯伯恩3号泵房',
							id: 20,
							field: ''
						}, {
							title: '奧斯伯恩4号泵房',
							id: 20,
							field: ''
						}, {
							title: '奧斯伯恩5号泵房',
							id: 20,
							field: ''
						}]
					},
					{
						title: '碧水湾小区',
						id: 20,
						field: '',
						children: [{
							title: '碧水湾1号泵房',
							id: 20,
							field: ''
						}, {
							title: '碧水湾2号泵房',
							id: 20,
							field: ''
						}, {
							title: '碧水湾3号泵房',
							id: 20,
							field: ''
						}, {
							title: '碧水湾4号泵房',
							id: 20,
							field: ''
						}, {
							title: '碧水湾5号泵房',
							id: 20,
							field: ''
						}]
					},
					{
						title: '秣陵福源小区',
						id: 20,
						field: '',
						children: [{
							title: '秣陵福源1号泵房',
							id: 20,
							field: ''
						}, {
							title: '秣陵福源2号泵房',
							id: 20,
							field: ''
						}, {
							title: '秣陵福源3号泵房',
							id: 20,
							field: ''
						}, {
							title: '秣陵福源4号泵房',
							id: 20,
							field: ''
						}, {
							title: '秣陵福源5号泵房',
							id: 20,
							field: ''
						}]
					}
				]
			}]

			//基本演示
			tree.render({
				elem: '#test12',
				data: data,
				showCheckbox: true //是否显示复选框
					,
				id: 'demoId1',
				isJump: true //是否允许点击节点时弹出新窗口跳转
					,
				click: function(obj) {
					var data = obj.data; //获取当前点击的节点数据
					//layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
					layer.open({
					    type: 2,
						area: ['800px', '400px'],
					    fix: false, //不固定
					    maxmin: true,
					    shadeClose: true,
					    shade: 0.4,
					    title: data.title,
					    content: 'deviState.html'
					});
				}
			});

			//按钮事件
			util.event('lay-demo', {
				getChecked: function(othis) {
					var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据

					layer.alert(JSON.stringify(checkedData), {
						shade: 0
					});
					console.log(checkedData);
				},
				setChecked: function() {
					tree.setChecked('demoId1', [12, 16]); //勾选指定节点
				},
				reload: function() {
					//重载实例
					tree.reload('demoId1', {

					});

				}
			});
		});
	</script>
</html>
